<template>
	<view :style="'height:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+20)+'rpx;position:fixed;top:0;background:'+topBgColor" class="custom">
		<!-- <view class="block custom-block" :style="'height:'+(custom.navHeight)+'rpx;width:calc(100% - '+(custom.navWidth+custom.navMarRight)+'rpx);margin-top:'+(custom.statusBar+custom.nvaMartom)+'rpx'" > -->
		<view class="block custom-block" :style="'height:'+(custom.navHeight)+'rpx;width:100%;margin-top:'+(custom.statusBar+custom.nvaMartom)+'rpx;'" >
			<view v-if="isBack" @click="backup" :style="'color:'+backColor" class="iconfont icon-zuojiantou backup-btn"></view>
			<view style="height:100%" :style="'color:'+color" class="title">{{title}}</view>
			<view v-if="isBack" style="visibility: hidden;" class="iconfont icon-zuojiantou backup-btn"></view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'CustomNav',
		props:{
			custom:Object,
			isBack:Boolean,
			backColor:{
				type:String,
				default:'#fff'
			},
			title:{
				type:String,
				default:'',
			},
			color:{
				type:String,
				default:'#fff'
			},
			topBgColor:{
				type:String,
				default:'rgba(0,0,0,0)'
			}
		},
		methods:{
			backup(){
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom{
		z-index: 999999;
		width: 100%;
		transition: all .3s ease;
		.custom-block{
			display: flex;
			align-items: center;
			.title{
				display: flex;
				justify-content: center;
				align-items: center;
				margin:0 20rpx;
				flex-grow: 1;
				transition: all .3s ease;
			}
			.iconfont.backup-btn{
				display: flex;
				align-items: center;
				flex-grow: 0;
				margin-left:20rpx;
				color: #fff;
				font-size: 36rpx;
				transition: all .3s ease;
			}
		}
	}
</style>